<template>
	<div class="padding-across-10">
		<div class="list">
			<p class="panel_title">区域列表</p>
			<el-tree :show-overflow-tooltip="true" style="height: 450px;overflow: auto;border: 0" ref="tree" :data="districtsDatas" :props="defaultProps" node-key="DistrictKeyId" :current-node-key="currentNodeKey" :highlight-current="true" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" @node-click="handleNodeClick">
			</el-tree>
		</div>
		<div style="width: 83%;float: right" v-loading="loading" element-loading-text="拼命加载中">
			<div style="width: 100%">
				<headerOpreate style="padding-bottom: 2px;float: left" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
				<div class="block" style="text-align:right;">
					<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
					</el-pagination>
				</div>
			</div>
			<el-table border style="width: 100%" :data="tableData">
				<el-table-column :show-overflow-tooltip="true" type="index" align="center"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" :label="$t('message.deviceName')" align="center" prop="ControlName"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" :label="$t('message.courseSchedule')" align="center">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.HasTable">{{$t('message.bindingCourseSchedule')}}</el-tag>
						<el-tag type="danger" v-else>{{$t('message.unboundCourseSchedule')}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column :show-overflow-tooltip="true" :label="$t('message.operation')" align="center">
					<template slot-scope="scope">
						<div v-if="!scope.row.HasTable">
							<el-button type="primary" size="small" @click="editTable(scope.row)"><i class="el-icon-plus el-icon--left"></i>{{$t('message.operationAdd')}}</el-button>
							<el-button type="primary" size="small" @click="importTable(scope.row)"><i class="el-icon-eleg-icon_upload el-icon--left"></i>{{$t('message.importExcel')}}</el-button>
						</div>
						<div v-else>
							<el-button type="primary" size="small" @click="editTable(scope.row)"><i class="el-icon-edit el-icon--left"></i>{{$t('message.opreateEdit')}}</el-button>
							<el-button type="primary" size="small" @click="importTable(scope.row)"><i class="el-icon-eleg-icon_upload el-icon--left"></i>{{$t('message.importExcel')}}</el-button>
							<el-button type="danger" size="small" @click="deleteTable(scope.row)"><i class="el-icon-delete2 el-icon--left"></i>清除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="block" style="text-align:right;margin-bottom:60px;padding-top: 2px">
				<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
		<!--编辑课程表-->
		<el-dialog :title="$t('message.editCourseSchedule')" v-model="editTableDialog" :class="[dialog-large-width]">
			<!-- <div class="block" style="padding:0 0 1rem; ">
            <el-button type="primary" @click="saveSubmit"> <i class="el-icon-eleg-icon_drive el-icon--left"></i>{{$t('message.save')}}</el-button>
        </div> -->
        <el-form :model="editForm" ref="editForm" label-width="100px" class="demo-ruleForm">
        	<el-form-item :label="$t('message.deviceName')" prop="pass">
        		<el-input v-model="editForm.Title" :disabled="true" style="max-width:640px"></el-input>
        	</el-form-item>
        	<el-form-item :label="$t('message.selectTemplate')">
        		<el-select v-model="editForm.OrderId" :placeholder="$t('message.pleaseSelect')" v-on:change="getOrders" style="max-width:640px">
        			<el-option v-for="item in editForm.Orders" :label="item.Name" :value="item.CourseOrderId">
        			</el-option>
        		</el-select>
        	</el-form-item>
        	<el-form-item :label="$t('message.courseSchedule')" prop="age">
        		<el-table :data="editForm.TableColumns" border style="width: 100%" class="table-columns">
        			<el-table-column :show-overflow-tooltip="true" :label="$t('message.courseSortorder')" align="center" prop="Name">
        			</el-table-column>
        			<el-table-column :show-overflow-tooltip="true" :label="$t('message.monday')" align="center">
        				<template slot-scope="scope">
        					<el-input v-model="scope.row.m1" :placeholder="$t('message.pleaseEnterContent')"></el-input>
        				</template>
        			</el-table-column>
        			<el-table-column :show-overflow-tooltip="true" :label="$t('message.tuesday')" align="center">
        				<template slot-scope="scope">
        					<el-input v-model="scope.row.m2" :placeholder="$t('message.pleaseEnterContent')"></el-input>
        				</template>
        			</el-table-column>
        			<el-table-column :show-overflow-tooltip="true" :label="$t('message.wednesday')" align="center">
        				<template slot-scope="scope">
        					<el-input v-model="scope.row.m3" :placeholder="$t('message.pleaseEnterContent')"></el-input>
        				</template>
        			</el-table-column>
        			<el-table-column :show-overflow-tooltip="true" :label="$t('message.thursday')" align="center">
        				<template slot-scope="scope">
        					<el-input v-model="scope.row.m4" :placeholder="$t('message.pleaseEnterContent')"></el-input>
        				</template>
        			</el-table-column>
        			<el-table-column :show-overflow-tooltip="true" :label="$t('message.friday')" align="center">
        				<template slot-scope="scope">
        					<el-input v-model="scope.row.m5" :placeholder="$t('message.pleaseEnterContent')"></el-input>
        				</template>
        			</el-table-column>
        			<el-table-column :show-overflow-tooltip="true" :label="$t('message.saturday')" align="center">
        				<template slot-scope="scope">
        					<el-input v-model="scope.row.m6" :placeholder="$t('message.pleaseEnterContent')"></el-input>
        				</template>
        			</el-table-column>
        			<el-table-column :show-overflow-tooltip="true" :label="$t('message.sunday')" align="center">
        				<template slot-scope="scope">
        					<el-input v-model="scope.row.m7" :placeholder="$t('message.pleaseEnterContent')"></el-input>
        				</template>
        			</el-table-column>
        		</el-table>
        	</el-form-item>
        	<el-form-item :label="$t('message.bellForClass')">
        		<el-select v-model="editForm.StartRingId" :placeholder="$t('message.pleaseSelect')" style="max-width:640px">
        			<el-option v-for="item in editForm.Rings" :label="item.FileName" :value="item.FileResourceKeyId">
        			</el-option>
        		</el-select>
        	</el-form-item>
        	<el-form-item :label="$t('message.bellForClassOver')">
        		<el-select v-model="editForm.FinishRingId" :placeholder="$t('message.pleaseSelect')" style="max-width:640px">
        			<el-option v-for="item in editForm.Rings" :label="item.FileName" :value="item.FileResourceKeyId">
        			</el-option>
        		</el-select>
        	</el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
        	<el-button @click="editTableDialog = false">取 消</el-button>
        	<el-button type="primary" @click="saveSubmit">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog :title="$t('message.uploadCourseSchedule')" v-model="importTableDialog" :class="[dialog-small-width]">
    	<el-form :model="importForm" ref="importForm" label-width="150px" class="demo-ruleForm">
    		<el-form-item label="上传设备">
    			<el-input v-model="importForm.Title" :disabled="true" style="max-width:360px"></el-input>
    		</el-form-item>
    		<el-form-item :label="$t('message.selectFiles')">
    			<uploadSection v-if="importTableDialog" ref="importSection" :district-id="ControlObj.ControlId" :file-type="fileType" :upload-url="uplodaUrl" :accept-types="acceptTypes" v-on:uploadComplete="uploadComplete" :usage="'2'" :control-obj="ControlObj"></uploadSection>
    		</el-form-item>
    	</el-form>
    </el-dialog>
</div>
</template>
<script>
	import headerOpreate from '../../../../components/headerOpreate'
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import uploadSection from '../../../../components/import'
	export default {
		components: {
			uploadSection,
			headerOpreate
		},
		data() {
			return {
				isReload: false,
				loading: false,
				editTableDialog: false,
				importTableDialog: false,
				tableData: [],
				tableData1: [],
				editForm: {},
				hasTable: false,
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				
				importForm: {},
				uplodaUrl: '/Api/User/File/ExcelImport',
				fileType: 3,
				acceptTypes: 'xls,xlsx',
				ControlObj: {},
				
				districtsDatas: [],
				currentNodeKey: null,
				defaultExpandedKeys: [],
				defaultProps: {
					children: 'Children',
					label: 'Name',
					id: 'Id'
				},
				districtForm: {
					name: '',
					districtid: ''
				},
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				},
					// {
					//   show: true,
					//   type:"primary",
					//   size:"small",
					//   icon:"el-icon-setting",
					//   name:'模板设置',
					//   action:"goOrderSet"
					// },
					// {
					//   show: true,
					//   type:"danger",
					//   size:"small",
					//   icon:"el-icon-eleg-icon_calendar",
					//   name:'节假日设值',
					//   action:"goHolidaySet"
					// }
					]
				}
			},
			props: {
				templateObj: {
					type: Object,
					default: function() {
						return {};
					}
				}
			},
			watch: {
				editForm: function(obj) {
					obj.OrderId
				}
			},
			methods: {
				executeAction(action) {
					if(action) {
						this[action]();
					}
				},
				handleCurrentChange(val) {
					this.currentPage = val;
					this.getTables();
				},
				handleSizeChange(val) {
					this.pageSize = val;
					this.getTables();
				},
				handleNodeClick(data) {
					this.districtForm.name = data.Name;
					this.districtForm.districtid = data.DistrictKeyId;
					this.getTables();
				},
			//前往模板设置页
			goOrderSet() {
				this.$emit('changeView', 'OrderList', {});
			},
			goHolidaySet() {
				this.$emit('changeView', 'HolidaySet', this.districtForm);
			},
			//保存修改课程表
			saveSubmit() {
				if(this.hasTable) {
					var params = {
						courseTableId: this.editForm.tableId,
						ControlId: this.editForm.Id,
						StartRing: this.editForm.StartRingId,
						FinishRing: this.editForm.FinishRingId,
						TableColumns: this.editForm.TableColumns,
						Order: this.editForm.OrderId,
						UserId: parseInt(GloabFun.getKeyId())
					}
					HttpServer.httpPost.call(this, '/Api/CourseTable/Put', params, function(response) {}, function(response) {
						if(response.data.code === 0) {
							this.getDatas();
							this.editTableDialog = false;
							this.$notify({
								title: '成功',
								message: this.$t('message.saveSuccess'),
								type: 'success',
								duration: 2500
							});
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					});
				} else {
					var params = {
						ControlId: this.editForm.Id,
						StartRing: this.editForm.StartRingId,
						FinishRing: this.editForm.FinishRingId,
						TableColumns: this.editForm.TableColumns,
						Order: this.editForm.OrderId,
						UserId: parseInt(GloabFun.getKeyId())
					}
					HttpServer.httpPost.call(this, '/Api/CourseTable/Post', params, function(response) {}, function(response) {
						if(response.data.code === 0) {
							this.getDatas();
							this.editTableDialog = false;
							this.$notify({
								title: '成功',
								message: this.$t('message.saveSuccess'),
								type: 'success',
								duration: 2500
							});
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					});
				}
			},
			editTable(row) {
				HttpServer.httpGet.call(this, '/Api/CourseTable/Info?id='+ row.ControlId +'&uid='+ GloabFun.getUid() +'&token=' +GloabFun.getToken(), function(response) {}, function(response) {
					this.hasTable = row.HasTable;
					this.editForm = response.data;
					this.editForm.Title = row.ControlName;
					this.editForm.Id = row.ControlId;
					this.editForm.tableId = row.CourseTableId;
					this.editTableDialog = true;
				});
			},
			importTable(row) {
				this.importForm.Title = row.ControlName;
				this.ControlObj = row;
				this.importTableDialog = true;
			},
			uploadComplete() {
				this.$notify({
					title: '成功',
					message: this.$t('message.uploadSuccess'),
					type: 'success',
					duration: 2500
				});
				this.getDatas();
				//导入成功之后打开编辑
				// HttpServer.httpGet.call(this, '/Api/CourseTable/' + this.ControlObj.ControlId, function(response) {}, function(response) {
				// 	this.hasTable = row.HasTable;
				// 	this.editForm = response.data;
				// 	this.editForm.Title = row.ControlName;
				// 	this.editForm.Id = row.ControlId;
				// 	this.editForm.tableId = row.CourseTableId;
				// 	this.editTableDialog = true;
				// });
			},
			//清除课程表
			deleteTable(row) {
				this.$confirm(this.$t('message.deleteDeviceCourseSchedulesWarning'), this.$t('message.warning'), {
					confirmButtonText: this.$t('message.yes'),
					cancelButtonText: this.$t('message.no'),
					type: 'warning'
				}).then(() => {
					HttpServer.httpPost.call(this, '/Api/CourseTable/Delete', {
						UserId: parseInt(GloabFun.getKeyId()),
						keyid: [row.CourseTableId]
					}, function(response) {}, function(response) {
						if(response.data.code === 0) {
							this.$notify({
								title: '成功',
								message: this.$t('message.deleteSuccess'),
								type: 'success',
								duration: 2500
							});
							this.getDatas();
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					});
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},
			getTables() {
				var param = {
					"userKeyId": parseInt(GloabFun.getKeyId()),
					"districtid": this.districtForm.districtid,
					"index": this.currentPage,
					"pagesize": this.pageSize
				}
				this.loading = true;
				HttpServer.httpPost.call(this, '/Api/District/GetCourseTables', param, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.tableData = response.data.data;
						this.totalSize = response.data.total;
						if(this.isReload){
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				})
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getTables();
			},
			sortDatas(arr) {
				for(var i=0;i<arr.length;i++){
					for(var j = i + 1;j<arr.length;j++){
						if(arr[i].DistrictKeyId>arr[j].DistrictKeyId){
							var tmp = arr[i];
							arr[i] = arr[j];
							arr[j] = tmp;
						}
					}
				}
				return arr;
			},
			//默认查询,用于左侧树状图展示
			getDatas() {
				//查询用户绑定区域
				this.loading = true;
				HttpServer.httpGet.call(this, '/Api/District/districtTree?uid=' + parseInt(GloabFun.getKeyId()), function(response) {}, function(response) {
					if(response.data.code === 0) {
						if(response.data.info.length > 0) {
							this.districtsDatas = this.sortDatas(response.data.info);
							this.defaultExpandedKeys.push(this.districtsDatas[0].DistrictKeyId);
							this.currentNodeKey = this.districtsDatas[0].DistrictKeyId;
							//默认查询第一个区域下的设备
							this.districtForm.name = this.districtsDatas[0].Name;
							this.districtForm.districtid = this.districtsDatas[0].DistrictKeyId;
							this.getTables();
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			getOrders() {
				// console.log('editForm.Orders',this.editForm.OrderId)
				HttpServer.httpGet.call(this, '/Api/CourseOrder/' + this.editForm.OrderId, function(response) {}, function(response) {
					// console.log(response)
					if(response.data.code === 0) {
						this.editForm.TableColumns = response.data.orders;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}

				});
			}

		},
		created() {
			this.getDatas();
			this.$nextTick(function() {});
		}
	}
</script>
<style lang="less">
	.table-columns {
		.cell {
			padding: 0;
			input {
				border: none;
			}
		}
	}
</style>
<style scoped lang="less">
	.list {
		height: 500px;
		// max-height:580px;
		width: 16%;
		float: left;
		overflow: auto;
		// padding-top: 10px;
		// background-color: #324157;
		margin-bottom: 10px;
		.panel_title {
			height: 28px;
			line-height: 28px;
			font-size: 15px;
			text-align: center;
			border: 1px solid #E0E0E0;
			border-radius: 5px;
			color: #fff;
			background-color: #324157;
		}
		// color:#fff
	}
</style>